<template>
  <div class="container">
    <el-form :inline="true" :model="formInline" class="grids gridColumns5">
      <el-form-item label="所属课程">
        <courseQuery v-model="formInline.curriculumId" val="_id" multiple="1"></courseQuery>
      </el-form-item>
      <el-form-item label="班级名称">
        <classQuery v-model="formInline.classId" multiple="1"></classQuery>
      </el-form-item>
      <el-form-item label=" 班级老师">
        <accountSelect v-model="formInline.classTeacherId"></accountSelect>
      </el-form-item>
      <el-form-item label="授课老师">
        <el-input v-model="formInline.teachingTeacher" placeholder="授课老师" clearable />
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="type">
          <el-radio-button label="周">周</el-radio-button>
          <el-radio-button label="月">月</el-radio-button>
        </el-radio-group>
        <el-button type="primary" @click="getInfo" style="margin-left: 15px">查询</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 月 -->
    <lessonScheduleMonth v-if="type=='月'" v-model="dates"></lessonScheduleMonth>
    <!-- 周 -->
    <lessonSchedule v-model="dates" v-else></lessonSchedule>

    <!-- <lessonScheduleWeek v-else v-model="weekData"></lessonScheduleWeek> -->
  </div>
</template>

<script setup lang="ts">
import lessonScheduleMonth from "@/views/courseManage/components/lessonScheduleMonth.vue";
import lessonSchedule from "@/views/courseManage/components/lessonSchedule.vue";
import lessonScheduleWeek from "@/views/courseManage/components/lessonScheduleWeek.vue";
const { proxy } = getCurrentInstance();
let dates = ref([]);
let formInline = ref({
  curriculumId: "",
  classId: "",
  classTeacherId: "",
  teachingTeacher: "",
});
let type = ref("月");
let weekData = ref([]);

onMounted(() => {
  getInfo();
});

function init() {
  formInline.value = {
    curriculumId: "",
    classId: "",
    classTeacherId: "",
    teachingTeacher: "",
  };
  getInfo();
}

function classStyle(e) {
  return {
    backgroundColor: e.classColor || proxy.$utils.getColor(e.className),
    color: "#fff",
    fontSize: "12px",
    padding: "5px 10px",
  };
}

function dates_format(day) {
  if (!dates.value.length) return;
  let list = [];
  for (let index = 0; index < dates.value.length; index++) {
    const element = dates.value[index];
    if (element.date == day) {
      element.className = element.className;
      list.push(element);
    }
  }
  return list;
}

async function getInfo() {
  let ret = await proxy.$apis.classData({
    type: "query",
  });
  let resp = await proxy.$apis.teachingScheduleData({
    type: "all",
    data: formInline.value,
  });
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    let current = proxy.$utils.findIndexByField(ret, "_id", element.classId);
    element.className = ret[current].className;
    element.classColor = ret[current].color;
  }
  dates.value = resp;
  getWeekData(resp); //获取周的数据
}

function getWeekData(resp) {
  resp.forEach((element) => {
    element.timeRange = element.classStartTime + "~" + element.classEndTime;
  });
  let res = proxy.$utils.sameSortArr(resp, "timeRange");
  res = sortJsonArrayByTimeInterval(res, "name");
  for (let index = 0; index < res.length; index++) {
    const element = res[index];
    element.timePeriod = element.name;
    let things = [];
    for (let j = 0; j < element.origin.length; j++) {
      const item = element.origin[j];
      things.push({
        timePeriod: element.name,
        date: item.date,
        course: item.className,
        watchman: item.teachingTeacher,
        place: item.classAddress,
        color: proxy.$utils.getColor(item.className),
      });
    }
    element.things = things;
  }
  weekData.value = res;
}

function sortJsonArrayByTimeInterval(jsonArray, fieldName) {
  function parseTime(timeStr) {
    const [hours, minutes] = timeStr.split(":").map(Number);
    return hours * 60 + minutes;
  }

  return jsonArray.sort((a, b) => {
    const intervalA = a[fieldName];
    const intervalB = b[fieldName];
    const startA = parseTime(intervalA.split("~")[0]);
    const startB = parseTime(intervalB.split("~")[0]);
    if (startA !== startB) {
      return startA - startB;
    } else {
      const endA = parseTime(intervalA.split("~")[1]);
      const endB = parseTime(intervalB.split("~")[1]);
      return endA - endB;
    }
  });
}

watch(
  () => formInline.value,
  (newValue, oldValue) => {
    if (newValue) getInfo();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss">
.class-calendar {
  .el-calendar-day {
    height: auto !important;
    min-height: 130px;
  }
}
</style>

<style lang="scss" scoped>
.container {
  margin: 20px;
  .date {
    margin-bottom: 5px;
  }
}
</style>
